<template>
  <el-card>
    <template #header>
      <div class="flex-x-between">
        <div class="flex-y-center">
          通知公告
          <el-icon class="ml-1"><Bell /></el-icon>
        </div>
        <el-link type="primary">
          <span class="text-xs" :onclick="openMessage">查看更多</span>
          <el-icon class="text-xs"><ArrowRight /></el-icon>
        </el-link>
      </div>
    </template>

    <el-scrollbar height="400px" v-loading="loading">
      <div
        v-for="(item, index) in tableData"
        :key="index"
        class="flex-y-center py-3"
      >
        <el-tag :type="getNoticeLevelTag(item.type!)" size="small">
          {{ getNoticeLabel(item.type!) }}
        </el-tag>
        <el-text
          truncated
          class="!mx-2 flex-1 !text-xs !text-[var(--el-text-color-secondary)]"
        >
          <el-link>
            <span @click="openMessageDetails(item.id!)">
              {{ item.title }}
            </span>
          </el-link>
        </el-text>
        <el-link>
          <el-icon class="text-sm">
            <View  @click="openMessageDetails(item.id!)"/>
          </el-icon>
        </el-link>
      </div>
    </el-scrollbar>
  </el-card>
</template>

<script setup lang="ts">
import { getNoticeLabel } from "@/enums/NoticeTypeEnum";
import MessageAPI, { type MessageVO } from "@/api/biz/user/message";

/** 仪表盘-通知公告面板 */
defineOptions({
  name: "DashboardMessagePanel",
  inheritAttrs: false,
});

const router = useRouter();
/** 弹窗状态 */
const loading = ref<boolean>(false);
/** 表格数据 */
const tableData = ref<MessageVO[]>([]);

const getNoticeLevelTag = (type: string) => {
  switch (type) {
    // 报警
    case "SYSTEM_UPGRADE" || "SYSTEM_MAINTENANCE" || "SECURITY_ALERT":
      return "danger";
    // 提示
    case "OTHER":
      return "warning";
    // 正常
    case "HOLIDAY_NOTICE" || "COMPANY_NEWS":
      return "primary";
    // 成功
    default:
      return "success";
  }
};
/** 打开消息页面 */
const openMessage = () => {
  router.push({ path: `/user/message` });
};
/** 打开消息详情页 */
const openMessageDetails = (id: number) => {
  router.push({ path: `/user/message/details`, query: { id: id } });
};

/** 列表接口 */
const getTableData = () => {
  loading.value = true;
  MessageAPI.getBaseMessageListApi({
    page: 1,
    limit: 15,
    title: undefined,
  })
    .then((res) => {
      const { data } = res;
      tableData.value = data.rows;
    })
    .catch(() => {
      tableData.value = [];
    })
    .finally(() => {
      loading.value = false;
    });
};
/** 页面渲染完成后初始化 */
onBeforeMount(async () => {
  getTableData();
});
</script>

<style lang="scss" scoped></style>
